<template>
  <div>
    <el-form
      size="small"
      ref="dataForm"
      label-width="120px"
      :model="dataForm"
      :rules="rules"
    >
      <el-row>
        <template v-for="(item) in options">

        <el-col :span="span"  :key="item.prop">
          <el-form-item
            :label="item.label"
            :prop="item.prop"
            :label-width="item.width ? item.width : '120px'"
            :rules="item.rules"
          >
            <el-select
              v-if="item.type === 'select'"
              :placeholder="item.isEdit ? `请选择${item.label}` : ''"
              :disabled="!item.isEdit"
              :clearable="item.isClears"
              filterable
              v-model="dataForm[item.prop]"
              style="width:100%"
            >
              <el-option
                v-for="(op, key, index) of item.option"
                :label="op"
                :value="key"
                :key="index"
              />
            </el-select>
            <el-input
              v-else-if="item.type === 'input'"
              :maxlength="item.len"
              rows="3"
              v-model="dataForm[item.prop]"
              :disabled="!item.isEdit"
              clearable
              :placeholder="item.isEdit ? `请输入${item.label}` : ''"
            >
            </el-input>
            <el-input
              v-else-if="item.type === 'textarea'"
              type="textarea"
              resize="none"
              :maxlength="item.len"
              rows="3"
              v-model="dataForm[item.prop]"
              show-word-limit
              :disabled="!item.isEdit"
              clearable
              :placeholder="item.isEdit ? `请输入${item.label}` : ''"
            >
            </el-input>
            <el-date-picker
              v-else-if="item.type === 'datetimerange'"
              range-separator="至"
              value-format="YYYY-MM-DD HH:mm:ss"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              type="datetimerange"
              v-model="dataForm[item.prop]"
              :disabled="!item.isEdit"
              clearable
            >
            </el-date-picker>
            <el-radio-group
              v-else-if="item.type === 'radio'"
              v-model="dataForm[item.prop]"
              :disabled="!item.isEdit"
              :placeholder="item.isEdit ? `请输入${item.label}` : ''"
            >
              <el-radio
                v-for="(op, key) of item.option"
                :key="key"
                :label="key"
                >{{ op }}</el-radio
              >
            </el-radio-group>
            <el-tooltip
              placement="bottom"
              :content="dataForm[item.viewProp]"
              effect="light"
              v-if="item.isView"
            >
              <i class="el-icon-view"></i>
            </el-tooltip>
            <el-row v-if="item.type === 'btn'">
              <template v-for="citem in item.btnList">
                <el-col
                  v-show="citem.typeName === 'close'"
                  :span="4"
                  :key="citem.typeName"
                >
                  <el-button :type="''" @click="close">
                    {{ citem.btnName }}
                  </el-button>
                </el-col>
                <el-col
                  v-show="citem.typeName === 'primary'"
                  :span="4"
                  :key="citem.typeName"
                >
                  <el-button :type="citem.typeName" @click="saveData">
                    <fa-icon class="fa-check" v-if="citem.typeName" />{{
                      citem.btnName
                    }}
                  </el-button>
                </el-col>
              </template>
            </el-row>
          </el-form-item>
        </el-col>

        <!-- <el-col v-if="index %4==0 && index !=0" :key="item.prop+123"></el-col> -->
        </template>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "config-form",
  props: {
    options: Array,
    initData: Object,
    span: {
      type: Number,
      default: 24
    }
  },
  data() {
    return {
      dataForm: {},
      rules: {}
    };
  },
  mounted() {
    this.dataForm = { ...this.initData };
  },
  methods: {
    // 保存
    saveData() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.$emit("uppdataSuccess", this.dataForm);
        }
      });
    },
    close() {
      this.$emit("close");
    }
  },
  watch: {
    initData() {
      this.dataForm = { ...this.initData };
    }
  }
};
</script>
<style lang="less">
.el-input {
  width: 90%;
}
</style>
